<template>
    <div>
        {{category1Selected}}
         <el-select v-model="category1Selected" placeholder="请选择"
            @change="category1Changed">
            <el-option
            v-for="item in category1List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
            </el-option>
        </el-select>
        {{category2Selected}}
         <el-select v-model="category2Selected" placeholder="请选择">
            <el-option
            v-for="item in category2List"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>
        {{category3Selected}}
         <el-select v-model="category3Selected" placeholder="请选择">
            <el-option
            v-for="item in category3List"
            :key="item.id"
            :label="item.name"
            :value="item.id">
            </el-option>
        </el-select>

        <el-button type="primary" @click="addAttrInfo">新增属性</el-button>

        <el-table 
            v-if="attrInfoFormVisible == false"
            :data="attrList"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="attrName"
                label="属性名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="categoryId"
                label="分类ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="categoryLevel"
                label="分类基本"
                width="180">
            </el-table-column>
            <el-table-column
                label="属性值">
                <template slot-scope = "scope">
                    {{scope.row.attrValueList.map(a=>{return a.valueName}).join("/")}}
                    </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope_2203A">
                    <el-button @click="deleteAttrInfo(scope_2203A.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-if="attrInfoFormVisible == false"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        

        <div v-if="attrInfoFormVisible == true">
            <el-form :model="attrInfo" :inline="true" class="demo-form-inline">
                {{attrInfo}}
                <br>
                <el-form-item label="属性名称">
                    <el-input v-model="attrInfo.attrName"/>
                </el-form-item>

                <div style="margin-bottom:10px;">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addAttrValue()">添加属性值</el-button>
                </div>
                <div>
                    <el-table 
                        :data="attrInfo.attrValueList"
                        style="width: 100%">
                        <el-table-column
                            prop="valueName"
                            label="名称"
                            width="180">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.valueName" placeholder="请输入内容"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="100">
                            <template slot-scope="scope_2203A">
                                <el-button @click="deleteAttrValue(scope_2203A.row.valueName)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!--查询按钮-->
                <div style="margin-top:22px;">
                    <el-button type="primary" size="mini" @click="saveAttrInfo">保存</el-button>
                    <el-button type="default" size="mini" @click="backToAttrList" >返回</el-button>
                </div>
            </el-form>
        </div>
        
    </div>
</template>

<script>

import * as categoryApi from '../../api/gmall/product/category'
import * as attrApi from '../../api/gmall/product/attr'
export default {
    data(){
        return{
            category1List:[],
            category1Selected:'',
            category2List:[],
            category2Selected:'',
            category3List:[],
            category3Selected:'',
            pageNo:1,
            pageSize:2,
            total:0,
            attrList:[],
            attrInfo:{
                attrName:'',
                categoryId:'',
                categoryLevel:'',
                attrValueList:[]
            },
            attrInfoFormVisible: false
        }
    },
    methods:{
        getCategory1(){
            categoryApi.getCategory1().then(res=>{
                if(res.data.ok){
                    this.category1List = res.data.data;
                }
            })
        },
        getCategory2(){
            categoryApi.getCategory2(this.category1Selected).then(res=>{
                if(res.data.ok){
                    this.category2List = res.data.data;
                }
            })
        },
        getCategory3(){
            categoryApi.getCategory3(this.category2Selected).then(res=>{
                if(res.data.ok){
                    this.category3List = res.data.data;
                }
            })
        },
        category1Changed(){
            this.category2List=[]
            this.category2Selected = ''
            this.attrInfo.categoryId = this.category1Selected
            this.attrInfo.categoryLevel = 1
            this.getCategory2();
            this.attrInfoList();
        },
        attrInfoList(){
            attrApi.attrInfoList(this.pageNo,this.pageSize,this.category1Selected,this.category2Selected,this.category3Selected).then(res=>{
                if(res.data.ok){
                    this.attrList = res.data.data.records;
                    this.total = res.data.data.total;
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.attrInfoList();

        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNo = val;
            this.attrInfoList();
        },
        addAttrInfo(){
            this.attrInfoFormVisible = true;
        },
        deleteAttrInfo(row){
            attrApi.deleteAttrInfo(row.id).then(res=>{
                alert(res.data.message)
            })
        },
        backToAttrList(){
            this.attrInfoFormVisible = false;
        },
        addAttrValue(){
            this.attrInfo.attrValueList.push({
                valueName:''
            })//push 数组操作，往数组添加一个元素
        },
        deleteAttrValue(valueName){
            // let index = this.attrInfo.attrValueList.findIndex(attrValue=>{return attrValue.valueName == valueName });
            // this.attrInfo.attrValueList.splice(index,1)

            for(let index in this.attrInfo.attrValueList){
                let attrValue = this.attrInfo.attrValueList[index];
                if(attrValue.valueName == valueName){
                    this.attrInfo.attrValueList.splice(index,1)
                }
            }
        },
        saveAttrInfo(){
            attrApi.saveAttrInfo(this.attrInfo).then(res=>{
                alert(res.data.message)
            })
        }
    },
    mounted(){
        this.getCategory1();
    },
    watch:{
        category2Selected(newValue,oldVaue){
            console.log(oldVaue,newValue)
            this.category3List=[]
            this.category3Selected = ''
            this.attrInfo.categoryId =  this.category2Selected
            this.attrInfo.categoryLevel = 2
            this.getCategory3();
             this.attrInfoList();
        },
        category3Selected(newValue,oldVaue){
            this.attrInfo.categoryId =  this.category3Selected
            this.attrInfo.categoryLevel = 3
             this.attrInfoList();
        }
    }
}
</script>
<style>

</style>


